import {
  Form,
  FormItem,
  Input,
  Modal,
  Radio,
  RadioGroup,
  Upload
} from 'ant-design-vue'
import { defineComponent, ref } from 'vue'

import { SvgIcon } from '@/components'

export default defineComponent({
  name: 'CategoryEditDialog',
  setup() {
    const supplierCode = ref(1)
    const showDialog = ref(false)
    function openDialog() {
      showDialog.value = true
    }
    function handleUploadChange(file: FileInfo) {
      console.log('upload', file)
      // fileList.value[index] = file.fileList
      // if (file.file.status === 'done') {
      //   emit('handleAwardUpload', {
      //     key: index,
      //     url: file.fileList[0].response.data
      //   })
      // }
    }
    function handleRemoveUpload(file: FileInfo) {
      // emit('handleAwardUpload', {
      //   key: index,
      //   url: ''
      // })
    }
    return {
      showDialog,
      supplierCode,
      openDialog,
      handleUploadChange,
      handleRemoveUpload
    }
  },
  render() {
    return (
      <Modal v-model:visible={this.showDialog} width={600} title={'新增分类'}>
        <Form labelCol={{ span: 3 }} style={{ marginTop: '15px' }}>
          <FormItem label={'一级分类名称'} name={''}>
            <Input
              placeholder={'请输入'}
              style={{ width: '300px' }}
              maxlength={8}
              v-slots={{
                suffix: () => <span>{0}/9</span>
              }}
            />
          </FormItem>
          <FormItem label="一级分类图标">
            <Upload
              listType="picture-card"
              // fileList={this.fileList[index]}
              // action={commonApi.uploadFileUrl}
              onChange={(args: FileInfo) => this.handleUploadChange(args)}
              remove={args => this.handleRemoveUpload(args)}
              showUploadList={{
                showPreviewIcon: false,
                showRemoveIcon: true
              }}
            >
              <div>
                <SvgIcon name="plus" />
                <div>上传图标</div>
              </div>
            </Upload>
          </FormItem>
          <FormItem label={'排序'} name={''}>
            <Input placeholder={'请输入'} style={{ width: '300px' }} />
          </FormItem>
          <FormItem label="商品供应商：">
            <RadioGroup v-model={this.supplierCode}>
              <Radio value={1}>肯德基</Radio>
              <Radio value={2}>麦当劳</Radio>
              <Radio value={3}>星巴克</Radio>
              <Radio value={4}>瑞幸咖啡</Radio>
            </RadioGroup>
          </FormItem>
        </Form>
      </Modal>
    )
  }
})
